<template>
  <div class="detail_bar">
    <div class="detail_icon">
      <div class="bar_icon">
        <i class="icon iconfont icon-left" @click="goBack()"></i>
      </div>
    </div>
    <div class="detail_full"></div>
    <div class="detail_icon">
      <router-link class="bar_icon" :to="`/cart`" tag="div">
        <i class="icon iconfont icon-cart"></i>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    goBack() {
      this.$router.back();
    }
  }
};
</script>
<style lang="less" scoped>
.detail_bar {
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  .detail_icon {
    width: 100px;
    height: 100%;
    // border: 1px solid red;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    .bar_icon {
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
  }
  .detail_full {
    flex-grow: 1;
  }
}
</style>